<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Smooth Div Scroll by Thomas Kahn</title>
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
<script src="js/jquery-1.4.2.min.js" 	type="text/javascript"></script> 
<script src="js/ui/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.smoothDivScroll-1.0-min.js" 	type="text/javascript"></script>

<script type="text/javascript">
	$(function() {
		$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", 
													autoScrollDirection: "backandforth",
													autoScrollStep: 1,
													autoScrollInterval: 15,
													startAtElementId: "startAtMe",
													visibleHotSpots: "always" });
		});
	</script>

<style type="text/css">
#makeMeScrollable {
	width: 100%;
	height: 130px;
	position: relative;
}

#makeMeScrollable div.scrollableArea * {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}
div.scrollingHotSpotLeftVisible {
	background-image:url("images/index_37_02.jpg");
}
div.scrollingHotSpotRightVisible {
	background-image:url("images/index_37_05.jpg");
}
div.scrollingHotSpotRight {
	width: 35px;
	min-width: 21px;
}
div.scrollingHotSpotLeft {
	width: 35px;
	min-width: 21px;
}
</style>


</head>
<body>
<div id="mainContent" style="width:500px;">
	<div id="makeMeScrollable">
	<div class="scrollingHotSpotLeft"></div>
	<div class="scrollingHotSpotRight"></div>
	<div align="center" class="scrollWrapper">
		<div class="scrollableArea"><img src="images/demo/field.jpg"
			alt="Demo image" width="497" height="330" /> <img
			src="images/demo/gnome.jpg" alt="Demo image" width="496" height="330" />
		<img src="images/demo/pencils.jpg" alt="Demo image" width="496"
			height="330" /> <img src="images/demo/golf.jpg" alt="Demo image"
			width="366" height="330" id="startAtMe" /> <img
			src="images/demo/river.jpg" alt="Demo image" width="496" height="330" />
		<img src="images/demo/train.jpg" alt="Demo image" width="440"
			height="330" /> <img src="images/demo/leaf.jpg" alt="Demo image"
			width="496" height="330" /> <img src="images/demo/dog.jpg"
			alt="Demo image" width="497" height="330" /></div>
	</div>
</div>
</div>
</body>
</html>
